<template>
  <div>
    <van-nav-bar
      fixed
      placeholder
      safe-area-inset-top
      title="投诉"
      @click-left="back"
    >
      <template #left>
        <van-icon name="arrow-left" size="16px" color="#333" />
      </template>
    </van-nav-bar>
    <div v-show="!show">
      <div class="cell">
        <div>投诉对象</div>
        <div>
          <input
            type="text"
            maxlength="11"
            v-model="complainword.houseSn"
            placeholder="请输入房源编号"
          />
        </div>
      </div>
      <div class="other">
        <div class="tword">投诉内容</div>
        <div class="textpart">
          <textarea
            v-model="complainword.content"
            placeholder="描述您要投诉的内容"
            name=""
          ></textarea>
          <van-button @click="jump">立即投诉</van-button>
        </div>
      </div>
    </div>
    <div v-show="show" class="showbord">
      <div style="margin-top: 30px">
        <van-icon size="70px" name="checked" />
      </div>
      <div style="margin: 40px 0 10px">您的投诉已成功提交</div>
      <div style="margin: 5px 0 50px">请等待处理</div>
    </div>
  </div>
</template>

<script>
import { complain } from "../../apis/user.js";
export default {
  data() {
    return {
      show: false,
      complainword: { houseSn: "", content: "" },
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    jump() {
      if (this.complainword.content == "") {
        this.$toast("请输入投诉内容");
      } else if (this.complainword.houseSn == "") {
        this.$toast("请输入房源编号");
      } else if (this.complainword.houseSn.length < 10) {
        this.$toast("请输入正确的房源编号");
      } else {
        complain(this.complainword).then((res) => {
          if (res.code == 200) {
            this.show = true;
          } else {
            this.$toast(res.msg);
          }
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.cell {
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  div {
    &:first-child {
      font-weight: bold;
      color: #333;
    }
    &:last-child {
      input {
        text-align: right;
        color: #333;
        border: none;
        &::placeholder {
          color: #999;
        }
      }
    }
  }
}
.other {
  margin: 15px;
  padding-bottom: 40px;
  .tword {
    font-weight: bold;
    color: #333;
  }
  .textpart {
    text-align: center;
    textarea {
      margin-top: 15px;
      box-sizing: border-box;
      padding: 15px;
      height: 150px;
      resize: none;
      width: 100%;
      background-color: #f9f9f9;
      border-color: #efefef;
      font-size: 12px;
      color: #333;
    }
    .van-button {
      margin-top: 20px;
      color: #fff;
      background-color: #45b7cb;
      border-radius: 20px;
      font-size: 15px;
      padding: 0px 25px;
    }
  }
}
.showbord {
  text-align: center;
  .van-icon {
    color: #45b7cb;
  }
}
</style>